<template>
	<div>
		<!--查询表单-->
		<el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">	
			<el-form-item prop="name">
				<el-input v-model="formInline.name" placeholder="请输入商品名字"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="subShaixuan">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="subClearAll('formInline')">清空条件</el-button>
			</el-form-item>
		</el-form>
		<!--表格展示-->
		<el-table :data="tableData" v-loading="loading" stripe style="width: 100%;height: 100%;" border>
			<el-table-column prop="goods.name" label="商品名"></el-table-column>
			<el-table-column prop="price_before" label="修改前"></el-table-column>
			<el-table-column prop="price_after" label="修改后"></el-table-column>
			<el-table-column prop="admin_name" label="操作人"></el-table-column>
			<el-table-column prop="type" label="操作类型"></el-table-column>
			<el-table-column prop="created_at" label="添加时间"></el-table-column>
		</el-table>
		<!--分页-->
		<div class="block">
			<el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="per_page" layout="total, prev, pager, next, jumper" :total="totals">
			</el-pagination>
		</div>

	</div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      //查询
      formInline: {
        name: ""
      },
      currentPage: 1, //当前页面
      totals: 0, //总条数
      per_page: 0, //每页条数
      page: "", //页码
      tableData: [] //渲染列表数据
    };
  },
  mounted: function() {
    var _this = this;
	_this.getTableData();
  },
  methods: {
    //渲染列表
    getTableData() {
      var _this = this;
      let params = {
        name: _this.formInline.name,
        page: _this.page
      };
      _this.$api.get( "shop/admin/goods/price_log", params, res => {
          console.log(res, "123");
          if (res.code == 200) {
            _this.tableData = res.data.data;
            _this.totals = res.data.total;
            _this.currentPage = res.data.current_page;
            _this.per_page = res.data.per_page;
            _this.loading = false;
          } else {
            _this.$message.error(res.message);
          }
        },
        err => {
          _this.$router.push("/Error");
        }
      );
	},
	
    //点击查询
    subShaixuan() {
      var _this = this;
      _this.getTableData();
    },
    //清空条件
    subClearAll(formInline) {
      var _this = this;
      _this.$refs[formInline].resetFields();
    },
    //分页
    handleCurrentChange(val) {
      var _this = this;
      _this.page = val;
      _this.getTableData();
    }
  }
};
</script>
<style>
.el-button + .el-button {
  margin-top: 10px;
  margin-left: 0px;
}

.block {
  text-align: center;
  margin-top: 30px;
}
</style>

